﻿@page "/docs/components/color-picker"

<Seo Canonical="/docs/components/color-picker" Title="Blazorise ColorPicker component" Description="Learn to use and work with the Blazorise ColorPicker component that allows you to select a color using a variety of input methods." />

<DocsPageTitle Path="Components/Color Picker">
    Blazorise ColorPicker component
</DocsPageTitle>

<DocsPageLead>
    The <Code>ColorPicker</Code> allow the user to select a color using a variety of input methods.
</DocsPageLead>

<DocsPageParagraph>
    <Code>ColorPicker</Code> component is based on a <Blazorise.Link To="https://simonwep.github.io/pickr/">Pickr</Blazorise.Link> library
    and as such is not a native color input element. That means that unlike <Anchor To="docs/components/color" Title="Link to ColorEdit">ColorEdit</Anchor> which will render <Code Tag>input type="color"</Code>,
    <Code>ColorPicker</Code> will render <Code>span</Code> element.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        In this Blazorise example, a <Code>ColorPicker</Code> component is bound to a colorValue variable using the <Code>@@bind-Color</Code> directive. Initially set to red (<Strong>#ff0000</Strong>), the <Code>colorValue</Code> updates automatically when a user selects a new color through the <Code>ColorPicker</Code>, demonstrating an interactive color selection tool in a Blazor application.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ColorPickerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ColorPickerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Show Hue Slider">
        In this Blazorise example, the <Code>ColorPicker</Code> component is enhanced with a hue slider, as indicated by the <Code>ShowHueSlider</Code> attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ColorPickerShowHueExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ColorPickerShowHueExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="Color" Type="string" Default="null">
        Gets or sets the input color value in hex format.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ColorChanged" Type="EventCallback<string>">
        Occurs when the color has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Palette" Type="string[]">
        List a colors below the colorpicker to make it convenient for users to choose from frequently or recently used colors.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowPalette" Type="bool" Default="true">
        Controls the visibility of the palette below the colorpicker to make it convenient for users to choose from frequently or recently used colors.
    </DocsAttributesItem>
    <DocsAttributesItem Name="HideAfterPaletteSelect" Type="bool" Default="true">
        Automatically hides the dropdown menu after a palette color is selected.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowClearButton" Type="bool" Default="true">
        Controls the visibility of the clear buttons.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowCancelButton" Type="bool" Default="true">
        Controls the visibility of the cancel buttons.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowOpacitySlider" Type="bool" Default="true">
        Controls the visibility of the opacity slider.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowHueSlider" Type="bool" Default="false">
        Controls the visibility of the hue slider.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowInputField" Type="bool" Default="true">
        Controls the visibility of the textbox which shows the selected color value.
    </DocsAttributesItem>
</DocsAttributes>